<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="英文标识">
                <a-input v-model="queryParam.f_enname" placeholder="请输入英文标识" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="枚举含义">
                <a-input v-model="queryParam.f_description" placeholder="请输入枚举含义" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="枚举组ID">
                <a-input v-model="queryParam.f_id" placeholder="请输入枚举组ID" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button v-auth:ha_enumeration_list type="primary" @click="queryList(queryParam)" icon="search"
                >查询</a-button
              >
              <a-button v-auth:ha_enumeration_list icon="reload" style="margin-left: 8px" @click="reQuery"
                >重置</a-button
              >
              <a-button v-auth:ha_enumeration_list icon="retweet" style="margin-left: 8px" @click="refreshCache"
                >刷新</a-button
              >
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <a-table
          :columns="columns"
          :scroll="{ x: 1000, y: 520 }"
          :data-source="enumData"
          :pagination="pagination"
          :loading="loading"
          rowKey="id"
          @change="tableChange"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 + row_idx }}
          </span>
          <span slot="operation" slot-scope="text, record">
            <template v-auth:ha_enumeration_view>
              <a @click="enumView(record)">详情</a>
            </template>
          </span>
        </a-table>
      </div>
    </a-card>
    <a-drawer
      title="枚举详情"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="visible = false"
    >
      <enumerationView
        ref="view"
        @close="visible = false"
        :enname="enname"
        :description="description"
        :enumid="enumid"
      ></enumerationView>
    </a-drawer>
  </div>
</template>
<script>
import { queryEnumList, refreshCache } from '@/api/base/enumeration'
import enumerationView from '@/views/base/EnumerationView'

export default {
  data () {
    return {
      queryParam: {
        enname: '',
        description: '',
        pageNumber: 1,
        pageSize: 10
      }, // 查询条件
      loading: false, // 加载ing
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '英文标识',
          dataIndex: 'enname',
          key: 'enname',
          align: 'left'
        },
        {
          title: '枚举含义',
          dataIndex: 'description',
          key: 'description',
          align: 'left'
        },
        {
          title: '枚举组ID',
          dataIndex: 'id',
          key: 'id',
          sorter: true
          // sortDirections: ['asc', 'desc']
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'operation' }
        }
      ], // 表头
      enumData: [], // 表格数据
      pagination: {
        // 表格参数
        defaultPageSize: 20,
        total: 0,
        showTotal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      visible: false, // 抽屉是否可见
      enname: '',
      description: '',
      enumid: '',
      row_idx: 0
    }
  },
  created () {
    this.queryList(this.queryParam)
  },
  components: {
    enumerationView
  },
  methods: {
    refreshCache () {
      refreshCache().then(res => {
        this.$message.success('刷新成功')
      })
    },
    reQuery () {
      // 重置查询条件并查询数据
      this.queryParam = {}
      this.queryList(this.queryParam)
    },
    tableChange (pagination, filters, sorter, { currentDataSource }) {
      this.row_idx = pagination.current * pagination.pageSize - pagination.pageSize
      this.queryParam.pageNumber = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      if (sorter != null && sorter.order != null) {
        this.queryParam.sort = sorter.field
        this.queryParam.order = sorter.order
      }
      this.queryList(this.queryParam)
    },
    enumView (res) {
      this.visible = true
      this.enname = res.enname
      this.description = res.description
      this.enumid = res.id
      setTimeout(() => {
        this.$refs.view.getList(res.id)
      }, 10)
    },
    queryList (queryParam) {
      queryParam.f_enname = queryParam.f_enname?.toString()?.trim()
      queryParam.f_description = queryParam.f_description?.toString()?.trim()
      queryParam.f_id = queryParam.f_id?.toString()?.trim()
      this.loading = true
      queryEnumList(queryParam).then(res => {
        this.enumData = res.data.records
        this.pagination.total = res.data.total
        this.loading = false
      })
    }
  }
}
</script>
